<template>
  <uni-drawer ref="userDrawer" mode="right" :mask-click="true" :width="330">
    <CuMultipleUserSelector :multiple="false" @change="userClick" :deptId="deptId" :excludeIds="excludeIds" />
  </uni-drawer>
</template>

<script>
import CuMultipleUserSelector from '@/components/cu-multiple-user-selector/index.vue'
import { listUser } from '@/api/system/user.js'
export default {
  name: 'UserSelector',
  components: {
    CuMultipleUserSelector
  },
  props: {
    deptId: {
      type: [Number, String],
      default: ''
    },
    // 排除的用户ID
    excludeIds: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      searchKey: '',
      listData: []
    }
  },
  methods: {
    open() {
      // this.ontReset()
      this.$refs.userDrawer.open()
    },
    userClick(item) {
      let data = {}
      if (item.length) {
        data = {
          name: item[0].name,
          value: item[0].userId
        }
      }
      this.$emit('change', data)
      this.$refs.userDrawer.close()
    },
    ontReset() {
      this.listData = []
      this.searchKey = ''
      this.onSearch()
    },
    onSearch() {
      const data = {
        deptId: this.deptId,
        keyword: this.searchKey
      }
      listUser(data).then((res) => {
        if (this.excludeIds.length > 0) {
          let arr = []
          for (var i = 0; i < res.rows.length; i++) {
            if (this.excludeIds.indexOf(res.rows[i].userId) == -1) {
              arr.push(res.rows[i])
            }
          }
          this.listData = arr
        } else {
          this.listData = res.rows
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.example-body {
  padding: 10px;
}
.scroll-view {
  // padding-top: var(--status-bar-height);
  /* #ifndef APP-NVUE */
  width: 100%;
  height: 100%;
  /* #endif */
  flex: 1;
}
// 处理抽屉内容滚动
.scroll-view-box {
  flex: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.info {
  padding: 15px;
  color: #666;
}

.info-text {
  font-size: 14px;
  color: #666;
}
.info-content {
  padding: 5px 15px;
}
.close {
  padding: 10px;
}
</style>
